<script setup lang="ts">
//主视频框架，包含视频和地图，还有下面的列表
import { reactive, ref, shallowRef } from 'vue'
import type { Component, ShallowRef } from 'vue'
import Map from '@/views/dashboard/right/map.vue'
import RealTimeVideo from '@/views/dashboard/right/video/realTimeVideo.vue'
import CheckedList from '@/views/dashboard/right/video/checkedList.vue'
import AllAlarmList from '@/views/dashboard/right/video/AllAlarmList.vue'
import OverdueList from '@/views/dashboard/right/video/OverdueList.vue'
import Media from '@/views/dashboard/right/video/media.vue'
import useDeviceStore from '@/store/gps/device'
import { storeToRefs } from 'pinia'
import { getOverdueList, useAlarmAllApi } from '@/api/gps/alarm'
import CdlMap from "@/components/map";
const deviceStore = useDeviceStore()

const props = defineProps<{ type: string }>()
// const emits = defineEmits(['switchMenu'])

type PageName = 'checked' | 'urgentAlarm' | 'allAlarm' | 'message' | 'mediaFile' | 'overdue' | 'media'
type Module = { [key in PageName]: { module: ShallowRef<Component>; data: ShallowRef<any[]>; total: number } }

const { checkedDeviceInfoList } = storeToRefs(deviceStore)

const mapRef = ref()
const videoRef = ref()
const deviceInfoRef = ref()
const activeName = ref<PageName>('checked')

const currenComponent = shallowRef<Component>(CheckedList)
// @ts-ignore
const componentsList = reactive<Module>({
  checked: {
    module: shallowRef(CheckedList),
    data: shallowRef([]),
    total: 0
  },
  allAlarm: {
    module: shallowRef(AllAlarmList),
    data: shallowRef([]),
    total: 0
  },
  overdue: {
    module: shallowRef(OverdueList),
    data: shallowRef([]),
    total: 0
  },
  media: {
    module: shallowRef(Media),
    data: shallowRef([]),
    total: 0
  }
})

function tabChange(name: PageName) {
  currenComponent.value = componentsList[name].module
}

initData()

function initData() {
  getAllAlarm()
}

function getAllAlarm() {
  useAlarmAllApi({
    pageNum: 1,
    pageSize: 100
  }).then((res) => {
    componentsList.allAlarm.total = res.data.totalCount
    componentsList.allAlarm.data = res.data.list
  })
  getOverdueList({
    pageNum: 1,
    pageSize: 100,
    timeRemaining: 0
  }).then((res) => {
    componentsList.overdue.total = res.data.totalCount
    componentsList.overdue.data = res.data
  })
  // getMediaList({
  //   pageNum: 1,
  //   pageSize: 100
  // }).then((res) => {
  //   componentsList.media.total = res.data.totalCount
  //   componentsList.media.data = res.data
  // })
}
</script>

<template>
  <div class="container">
    <div class="content" :style="{ 'flex-direction': 'row-reverse' }">
<!--      <Map ref="mapRef"></Map>-->
      <CdlMap active></CdlMap>
      <RealTimeVideo ref="videoRef"></RealTimeVideo>
    </div>
    <div class="info">
      <el-tabs v-model="activeName" class="item-padding" @tab-change="tabChange">
        <el-tab-pane :label="`选中的列(${checkedDeviceInfoList.length})`" name="checked"></el-tab-pane>
        <el-tab-pane :label="`紧急报警`" name="urgentAlarm" disabled></el-tab-pane>
        <el-tab-pane :label="`所有报警(${componentsList.allAlarm.total})`" name="allAlarm"></el-tab-pane>
        <el-tab-pane label="设备消息" name="message" disabled></el-tab-pane>
        <el-tab-pane label="媒体文件" name="mediaFile" disabled></el-tab-pane>
        <el-tab-pane label="过期列表" name="overdue"></el-tab-pane>
      </el-tabs>
      <component
        :is="currenComponent"
        ref="deviceInfoRef"
        :table-data="componentsList[activeName].data"
        class="set_height"></component>
    </div>
  </div>
</template>

<style scoped lang="css">
.container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.content {
  display: flex;
}
.content > div {
  flex: 1;
}
.info {
  height: calc(100% - 600px);
}
.set_height {
  height: calc(100% - 40px);
}
</style>
